<template>
	<div class="template-management">
		<zk-searcher v-model="query" :options="searchColumns" />
		<w-block class="body" title="督办信息列表" style="margin-top: 10px">
			<zk-table
				:columns="tableColumns"
				:service="service"
				:query="query"
				use-selection
				:actions="actions"
				:requestInterceptor="requestInterceptor"
				@onSelectionChange="onSelection"
			>
				<template #control="scope">
					<el-button size="small" type="text" @click="jump(scope)">办理</el-button>
					<el-button size="small" type="text" :disabled="scope.row.db_state == 3" @click="handleDialogFeedback(scope)">
						{{ scope.row.db_state == 3 ? '已反馈' : '反馈' }}
					</el-button>
				</template>
			</zk-table>
		</w-block>
		<w-dialog :visible.sync="visible" height="auto" title="超时预警反馈">
			<el-form ref="modelForm" :model="model" label-width="160px">
				<el-row>
					<el-col v-for="item of modalColumns" :key="item.key" :span="item.span || 22">
						<el-form-item
							:label="item.label"
							:prop="item.key"
							:rules="item.required && [{ required: true, message: `请输入${item.label}`, trigger: ['blur'] }]"
						>
							<zk-item-pool
								v-model="model[item.key]"
								:option="{...item, disabled:item.disabled }"
							/>
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
			<template #footer>
				<div class="flex-end">
					<el-button type="default" @click="visible=false">取 消</el-button>
					<el-button type="primary" @click="submit">保 存</el-button>
				</div>
			</template>
		</w-dialog>
	</div>
</template>
<script>
import { taskSupervisionCommand as service } from '@/services'
import SearchTableCRUDMixin                  from '@/mixins/search-table-crud-mixin'

import { TYPE_ENUM } from '@/common/zk-constants'

export default {
	mixins : [SearchTableCRUDMixin],
	data() {
		return {
			columns     : [
				{ 'label': '项目名称', 'key': 'project_name', table: true, search: true, required: true },
				{ 'label': '工作名称', 'key': 'work_name', table: true, search: true, required: true },
				{ 'label': '任务名称', 'key': 'task_name', table: true, search: true, required: true },
				{ 'label': '责任部门', 'key': 'duty_dept_name', table: true, required: true },
				{ 'label': '责任人', 'key': 'done_person_name', table: true, required: true },
				{ 'label': '应完成日期', 'key': 'should_done_time', table: true, required: true },
				{ 'label': '状态', 'key': 'db_state', type: TYPE_ENUM.SELECT, storeKey: 'partSuperviseState', table: true, search: true, required: true },
				{ 'label': '上级督办内容', 'key': 'ld_content', table: true, required: true },
				{ 'label': '上级督办时间', 'key': 'db_time', rangeKeys: ['db_time_start', 'db_time_end'], type: TYPE_ENUM.DATE_RANGE, table: true, search: true, required: true },
				{ 'label': '下发时间', 'key': 'xf_time', table: true, required: true },
				{ 'label': '提醒次数', 'key': 'tip_num', table: true, required: true },
			],
			modalColumns: [
				{ 'label': '应完成日期', 'key': 'should_done_time', table: true, disabled: true },
				{ 'label': '任务超时原因', 'key': 'reason_type', type: TYPE_ENUM.RADIO, storeKey: 'reasonType', required: true },
				{ 'label': '超时具体原因', 'key': 'overtime_content', type: TYPE_ENUM.TEXT_AREA, required: true },
				{ 'label': '整改措施', 'key': 'handle_content', type: TYPE_ENUM.TEXT_AREA, required: true },
			],
			service,
			actions     : ['slot', 180],
		}
	},
	watch  : {
		'model.reason_type': {
			deep: true,
			// immediate: true,
			handler(e) {
				// console.log('model.reason_type', e, this.modalColumns);
				const personInChargeIndex = this.modalColumns.findIndex(item => item.key == 'fk_duty_person')
				const personInChargeItem = { 'label': '负责人', 'key': 'fk_duty_person', required: true, }
				//选中内部原因的时候
				if (e === '01') {
					if (personInChargeIndex > -1) return;//如果this.modalColumns里面有负责人,返回
					this.modalColumns.splice(1, 0, personInChargeItem);//插入负责人
				}
				//非选中内部原因的情况下
				else {
					if (personInChargeIndex > -1) this.modalColumns.splice(personInChargeIndex, 1)//如果this.modalColumns里面有负责人,删除负责人
				}
			}
		},
	},
	methods: {
		requestInterceptor(query) {
			return { ...query, 'pageType': 'xjfk'/*上级督办*/ }
		},
		jump({ row }) {
			console.log(row);
			this.$router.push({
				path : `/tree-task/${ row.rel_project_id }`,
				query: {
					projectName: row.project_name,
					taskPzId   : row.rel_task_id
				}
			})
		},
		async handleDialogFeedback({ row }) {
			this.model = { ...row };
			this.visible = true;
		},
		async submit() {
			this.$refs['modelForm'].validate(async (valid) => {
				if (valid) {
					await this.service.doFk_xj({
						...this.model,

					}) && this.reload()
					this.model = {}
					this.visible = false
				}
			})
		},
	},
	async mounted() {
	}
}
</script>
<style scoped lang="scss">
	.command-dialog {
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
	}

	.table-look-details {
		padding: 20px 0;
		width: 100%;
		border-collapse: collapse;

		td {
			border: 1px solid rgba(77, 116, 251, 0.3);
			padding: 10px 20px;
		}

		.bg-title {
			width: 200px;
			background-color: #f5f5f5;
		}

	}
</style>
